<template>
	<x-popup position="center" :show="showUpgrade" :closeOnClickOverlay="true" :closeIcon="true" closeImag="https://oss.jtmckj.com/h5-uniapp/qnig/my/close-write.png" @update:show="closeUpgrade" >
		<view class="up-pop-view">
			 <image class="wh100" :style="{ backgroundImage: 'url(' + userInfo.backgroundAtt1 + ')' }"></image>

			<view class="up-content-view" v-if="userInfo.upCardRemark">
				<view style="margin-bottom: 24rpx">会员权益</view>
				<view style="line-height: 36rpx; height: 36rpx; font-size: 24rpx">
					{{ userInfo.upCardRemark || '' }}
				</view>
			</view>
			<view v-if="userInfo.memberIsPayCard == '0'" class="up-sub-but" @click.stop="PayMemberUpHandle">
				立即升级
			</view>
			<view v-if="userInfo.memberIsPayCard == '1'" class="up-sub-but" @click.stop="PayMemberUpHandle">
				立即续费
			</view>
		</view>
		<pay v-if="payShow" :show="payShow" @update:show="payShow = $event" @finishPay="finishPay($event)" payto="up" :info="payInfo" />
	</x-popup>
	
</template>

<script setup>
	
	import { ref, defineProps, defineEmits } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	
	// 定义 props
	const props = defineProps({
		showUpgrade: {
			type: Boolean,
			default: false
		},
	});
	
	const userInfo = uni.getStorageSync('cardInfo')
	
	// 定义 emits
	const emit = defineEmits(['update:show']);
	// const { showUpgrade  } = toRefs(props);
	// 关闭弹窗时触发的事件
	const closeUpgrade = (event) => {
	  emit('update:show', event);
	};

	const payInfo = ref({
		    cardNo: userInfo.code,
		    fee: userInfo.payCardAmt
		})
	const payShow = ref(false)
	// 会员卡升级操作   
	const PayMemberUpHandle = ()=>{
		payShow.value = true
		
	}
	const finishPay = (e)=>{
		if(e){
			emit('upFine', true);
		}
	}
	
	

	
	
</script>

<style scoped lang="less">
	::v-deep{
		.popup-content{
			padding: 0;
		}
		.close-img{
			z-index: 10;
		}
	}
	.up-pop-view {
	    width: 600rpx;
	    height: 800rpx;
	    overflow: hidden;
		border-radius: 12rpx;
	}
	.wh100 {
	    width: 100%;
	    height: 100%;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	}
	.up-close-but {
	    position: absolute;
	    top: 24rpx;
	    right: 24rpx;
	    width: 40rpx;
	    height: 40rpx;
	}
	
	.up-title-view {
	    position: absolute;
	    top: 166rpx;
	    width: 520rpx;
	    height: 68rpx;
	    margin: 0 40rpx;
	    color: #ff3333;
	    font-weight: bold;
	    overflow: hidden;
	}
	
	.up-content-view {
	    position: absolute;
	    top: 240rpx;
	    width: 480rpx;
	    height: 320rpx;
	    background: #fff6e5;
	    border-radius: 8rpx;
	    margin: 0 40rpx;
	    color: #212121;
	    padding: 40rpx 20rpx;
	    overflow-y: scroll;
	}
	
	.up-sub-but {
	    position: absolute;
	    bottom: 40rpx;
	    left: 140rpx;
	    width: 320rpx;
	    height: 80rpx;
		background: var(--mainbaccolor7);
		border-radius: 40rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: var(--maincolor);
		line-height: 80rpx;
	}
	::v-deep .u-popup__content {
		background: none !important;
	}
</style>